<template>
	<div class="device-maintenance">
	  <el-card>
		<div style="font-weight:bold;margin-bottom:14px;">设备维护与检修计划</div>
		<el-table
		  :data="planData"
		  border
		  size="small"
		  style="margin-bottom:26px;"
		  :row-class-name="planRowClass"
		>
		  <el-table-column prop="code" label="设备编号" width="120"/>
		  <el-table-column prop="name" label="设备名称" width="130"/>
		  <el-table-column prop="type" label="设备类型" width="100"/>
		  <el-table-column prop="lastMaint" label="上次维护日期" width="120"/>
		  <el-table-column prop="cycle" label="维护周期(天)" width="110"/>
		  <el-table-column prop="nextMaint" label="下次维护" width="120"/>
		  <el-table-column prop="daysLeft" label="剩余天数" width="110">
			<template #default="scope">
			  <el-tag :type="scope.row.daysLeft<=3 ? 'danger' : scope.row.daysLeft<=7 ? 'warning' : 'success'">
				{{ scope.row.daysLeft }}
			  </el-tag>
			</template>
		  </el-table-column>
		  <el-table-column prop="person" label="负责人" width="100"/>
		  <el-table-column prop="desc" label="备注"/>
		</el-table>
  
		<div style="font-weight:bold;margin-bottom:14px;">故障与维修记录</div>
		<el-table
		  :data="faultData"
		  border
		  size="small"
		>
		  <el-table-column prop="code" label="设备编号" width="120"/>
		  <el-table-column prop="name" label="设备名称" width="130"/>
		  <el-table-column prop="faultDate" label="故障时间" width="120"/>
		  <el-table-column prop="desc" label="故障描述" />
		  <el-table-column prop="repairDate" label="维修时间" width="120"/>
		  <el-table-column prop="result" label="维修结果" width="130"/>
		  <el-table-column prop="person" label="处理人" width="100"/>
		</el-table>
	  </el-card>
	</div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // 维护计划模拟数据
  const planData = [
  {
    code: 'EQP-201',
    name: '高速压片机A',
    type: '压片机',
    lastMaint: '2024-05-20',
    cycle: 30,
    nextMaint: '2024-06-19',
    daysLeft: 4,
    person: '李工',
    desc: '主轴定检'
  },
  {
    code: 'EQP-202',
    name: '自动灌装机B',
    type: '灌装机',
    lastMaint: '2024-05-10',
    cycle: 45,
    nextMaint: '2024-06-24',
    daysLeft: 9,
    person: '王工',
    desc: '更换密封圈'
  },
  {
    code: 'EQP-203',
    name: '灭菌柜C',
    type: '灭菌柜',
    lastMaint: '2024-04-30',
    cycle: 60,
    nextMaint: '2024-06-29',
    daysLeft: 14,
    person: '陈工',
    desc: ''
  },
  {
    code: 'EQP-204',
    name: '贴标机D',
    type: '贴标机',
    lastMaint: '2024-05-28',
    cycle: 30,
    nextMaint: '2024-06-27',
    daysLeft: 12,
    person: '赵工',
    desc: '检查贴标头'
  },
  {
    code: 'EQP-205',
    name: '铝箔封口机E',
    type: '封口机',
    lastMaint: '2024-05-05',
    cycle: 40,
    nextMaint: '2024-06-14',
    daysLeft: -1,
    person: '李工',
    desc: '周期维护'
  },
  {
    code: 'EQP-206',
    name: '自动装盒机F',
    type: '装盒机',
    lastMaint: '2024-05-12',
    cycle: 30,
    nextMaint: '2024-06-11',
    daysLeft: -4,
    person: '王工',
    desc: '齿轮润滑'
  },
  {
    code: 'EQP-207',
    name: '立式包装机G',
    type: '包装机',
    lastMaint: '2024-05-22',
    cycle: 20,
    nextMaint: '2024-06-11',
    daysLeft: -4,
    person: '陈工',
    desc: '电气系统检查'
  }
]

  
  // 行高亮提醒：3天内高亮红色，7天内橙色
  function planRowClass({ row }) {
	if (row.daysLeft <= 3) return 'danger-row'
	if (row.daysLeft <= 7) return 'warning-row'
	return ''
  }
  
  // 故障/维修历史模拟数据
  const faultData = [
  {
    code: 'EQP-201',
    name: '高速压片机A',
    faultDate: '2024-05-21',
    desc: '电机温度异常',
    repairDate: '2024-05-22',
    result: '更换风扇，恢复正常',
    person: '李工'
  },
  {
    code: 'EQP-202',
    name: '自动灌装机B',
    faultDate: '2024-05-15',
    desc: '流量计故障',
    repairDate: '2024-05-16',
    result: '更换流量计',
    person: '王工'
  },
  {
    code: 'EQP-203',
    name: '灭菌柜C',
    faultDate: '2024-05-30',
    desc: '传感器报警',
    repairDate: '2024-05-31',
    result: '重新校准',
    person: '陈工'
  },
  {
    code: 'EQP-204',
    name: '贴标机D',
    faultDate: '2024-06-01',
    desc: '标签偏位',
    repairDate: '2024-06-01',
    result: '调整机械臂',
    person: '赵工'
  },
  {
    code: 'EQP-205',
    name: '铝箔封口机E',
    faultDate: '2024-06-05',
    desc: '封口不严',
    repairDate: '2024-06-06',
    result: '更换加热片',
    person: '李工'
  },
  {
    code: 'EQP-206',
    name: '自动装盒机F',
    faultDate: '2024-06-07',
    desc: '传送带打滑',
    repairDate: '2024-06-08',
    result: '调整张紧轮',
    person: '王工'
  },
  {
    code: 'EQP-207',
    name: '立式包装机G',
    faultDate: '2024-06-09',
    desc: 'PLC故障',
    repairDate: '2024-06-10',
    result: '更换模块',
    person: '陈工'
  }
]

  </script>
  
  <style scoped>
  .device-maintenance {
	padding: 16px;
  }
  .danger-row {
	background: #ffeaea !important;
  }
  .warning-row {
	background: #fff7e5 !important;
  }
  </style>
  